<!--
*@payBackResult
*@author lijiaqi
*@date 2023/10/17 16:05
-->
<template>
  <div class="pageBox">
    <!--    头部-->
    <x-header :left-options="{backText: ''}">还钱结果</x-header>
    <!--    内容部分-->
    <div class="content_box">
      <!--   模块   -->
      <div class="item_box">
        <!--小模块-->
        <div class="item_box_one">
          <div class="one_box">
            <div class="result_box">
              <x-icon style="fill: #ff4a32" type="ios-checkmark-outline" size="70"></x-icon>
              <p class="result_text">还款成功</p>
              <p>还款金额：<span style="color: #ff4a32">{{count}}.00元</span></p>
            </div>
          </div>
        </div>

        <div class="item_box_one">
          <div class="one_box" v-for="(item,index) in dataList" :key="index">
            <div class="itemLine_box">
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </div>
          </div>
        </div>
      </div>

      <!--    按钮    -->
      <div class="button_box">
        <div class="but_item" @click="toPay()">
          <p>完成</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "payBackResult",
  props: {},
  components: {},
  data() {
    return {
      count: '',
      dataList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.count = this.$route.query.count || ''
    this.dataList = [
      {
        name: '还款账号',
        value: '江西农商银行（尾号8736）'
      }, {
        name: '借据号',
        value: 'A00001'
      }, {
        name: '归还本金',
        value: this.count/2 + '.00元'
      }, {
        name: '归还利息',
        value: this.count/2 + '.00元'
      }, {
        name: '本息合计',
        value: this.count + '.00元'
      }
    ]
  },
  mounted() {
  },
  methods: {
    //去支付
    toPay() {
      this.$router.push("/refinance/renewalComfirmation");
    }
  }
}
</script>

<style lang="less" scoped>
.pageBox {
  min-height: 100vh;
  //中间内容部分
  .content_box {
    width: 100%;
    margin-top: 16px;

    .item_box {
      margin-bottom: 10px;
      height: 100%;
      //width: 100%;
      padding: 0 10px;
      background-color: #FFFFFF;

      .item_box_one {
        border-bottom: 1px solid #E5E6EB;
      }

      .item_box_one:last-child {
        border-bottom: 0;
      }

      .one_box {
        padding: 10px 0px;

        .result_box {
          height: 150px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .result_text {
            font-weight: 700;
            font-size: 16px;
            margin: 5px 0;
          }
        }

        .itemLine_box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          p:first-child {
            margin-right: 15px;
          }
        }
      }
    }

    //按钮部分
    .button_box {
      width: 100%;
      margin: 30px 0;

      .but_item {
        margin: 0 10px;
        padding: 10px 0px;
        //width: 90%;
        //margin: 0 auto;
        background-color: #ff4a32;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          color: white;
          font-size: 16px;
        }
      }
    }
  }

  /deep/ .weui-cell {
    margin: 0;
    padding: 10px 0;
  }

  /deep/ .weui-cells:last-child:after {
    border-bottom: 0;
  }

  /deep/ .weui-cell:before {
    border: 0;
  }

  /deep/ .weui-label {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
